<template>
  <!DOCTYPE html>
  <html lang="en">
    <head>
      <meta charset="UTF-8" />
      <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    </head>
    <body>
      <div class="box-full" id="touchArea">
        <iframe
          id="myIframe"
          :src="src"
          width="100%"
          height="100%"
          frameborder="0"
          scrolling="no"
          sandbox="allow-scripts allow-same-origin allow-forms allow-pointer-lock"
        ></iframe>
      </div>
    </body>
  </html>
</template>

<script>
export default {
  props: {
    src: {
      default: '',
      type: String
    }
  }
}
setTimeout(() => {
  nextTick(() => {
    var iframe = document.getElementById('myIframe')
    console.log(iframe)
    iframe.classList.toggle('hide-scrollbar')
  })
}, 2000)
</script>
<style scoped>
iframe {
  overflow: hidden;
  scrollbar-width: none; /* Firefox 64+ */
  -ms-overflow-style: none; /* Internet Explorer and Edge */
}
.hide-scrollbar {
  overflow: hidden;
  scrollbar-width: none; /* Firefox 64+ */
  -ms-overflow-style: none; /* Internet Explorer and Edge */
}
</style>
